<template>
  <el-dialog title="预约" v-model="isAppoint" width="888px" :before-close="closeAppoint">
    <el-form label-width="120px">
      <div style="margin: 0 20px 10px 100px; height: 100%; float: left">
        <div class="head_week">
            <div v-for="(item, index) in week" :key="index"
                  :class="{ top_style: item.is_active === 0, top_active: item.is_active === 1 }"
                  @click="changWeek(item, index)">
              <div class="head_week_title">{{ item.month }}-{{ item.date }}</div>
              <div class="head_week_title">{{ item.day }}</div>
            </div>
        </div>
        <div class="head_selected">
          <div style="display: flex">
            <div style="background-color: #c8c9cc; width: 40px; height: 20px; margin-right: 10px"></div>
            <div class="text">不可预约</div>
          </div>
          <div style="display: flex">
            <div style="background-color: #ffa4a4; width: 40px; height: 20px; margin-right: 10px"></div>
            <div class="text">已有预约</div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: var(--el-color-primary-light-3); width: 40px; height: 20px; margin-right: 10px"></div>
            <div class="text">当前预约</div>
          </div>
        </div>
        <div style="margin: 10px 50px 0 20px; height: 100%; float: left" class="button_wrap">
          <el-button v-for="(item, index) in timeArr" :key="index" @click="changTime(item, index)"
                     :type="item.status === 0 ? '' : item.status === 1 ? 'danger' : item.status === 2 ? 'info' : 'primary'"
                     :disabled="item.status === 1 || item.status === 2" class="button_style">{{ item.showTime }}
          </el-button>
        </div>
      </div>
    </el-form>
    <template v-slot:footer>
      <el-button @click="closeAppoint">取消</el-button>
      <el-button type="primary" @click="saveAppoint" style="margin-left: 20px">确定</el-button>
    </template>
  </el-dialog>
</template>
<script>
import baseService from "@/service/baseService";

export default {
  data() {
    return {
      isAppoint: false,
      machineId: 0,
      timeArr: [], //所有时间
      dateNow: "", //预约日期
      week: [], //预约周
      chooseTimeArr: [] //预约选中时间数组
    };
  },
  methods: {
    closeAppoint() {
      this.isAppoint = false;
      for (let i = 0; i < this.week.length; i++) {
        this.week[i].is_active = 0;
      }
      this.week[0].is_active = 1;
      for (let i = 0; i < this.timeArr.length; i++) {
        if (this.timeArr[i].status === 3) {
          this.timeArr[i].status = 0;
        }
      }
    },
    saveAppoint() {
      if (this.chooseTimeArr.length > 0) {
        // this.$message.success("选择时间成功");
        this.isAppoint = false;
        this.$emit("custom-event", this.chooseTimeArr);
      } else {
        this.$message.error("请选择预约时间");
        for (let i = 0; i < this.timeArr.length; i++) {
          if (this.timeArr[i].status === 2) {
            this.timeArr[i].status = 0;
          }
        }
      }
    },
    changTime(val, index) {
      const chooseTime = this.dateNow + " " + val.time;
      const deleteIndex = this.chooseTimeArr.indexOf(chooseTime);
      if (deleteIndex > -1) {
        this.chooseTimeArr.splice(deleteIndex, 1); // 删除该元素
        if (this.timeArr[index].status === 3) {
          this.timeArr[index].status = 0;
        }
      } else {
        this.chooseTimeArr.push(chooseTime);
        if (this.timeArr[index].status === 0) {
          this.timeArr[index].status = 3;
        }
      }
      // console.log(chooseTime);
      // console.log(this.chooseTimeArr);
    },
    //每次打开预约弹窗时，默认选中星期的当天
    getAppoint() {
      let arr = [];
      for (let i = 0; i < 30; i++) {
        arr.push(this.dealTime(i));
      }
      arr[0].is_active = 1;
      this.week = arr;
      this.dateNow = this.week[0].full;
    },
    //点击切换星期状态
    changWeek(val, index) {
      for (let i = 0; i < this.week.length; i++) {
        this.week[i].is_active = 0;
      }
      this.week[index].is_active = 1;
      this.dateNow = val.full;
      let formData = {
        dateTime: this.dateNow,
        machineId: this.machineId
      };
      this.getAppointed(formData);
    },
    // 处理未来七天的函数
    dealTime(num) {
      let time = new Date(); // 获取当前时间日期
      let date = new Date(time.setDate(time.getDate() + num)).getDate(); //这里先获取日期，在按需求设置日期，最后获取需要的
      let newDate = date.toString().padStart(2, "0");
      let month = time.getMonth() + 1; // 获取月份
      let newMonth = month.toString().padStart(2, "0");
      let day = time.getDay(); //  获取星期
      let year = time.getFullYear();
      let full = year + "-" + newMonth + "-" + newDate;
      // console.log(full);
      switch (day) {
        //  格式化
        case 0:
          day = "星期日";
          break;
        case 1:
          day = "星期一";
          break;
        case 2:
          day = "星期二";
          break;
        case 3:
          day = "星期三";
          break;
        case 4:
          day = "星期四";
          break;
        case 5:
          day = "星期五";
          break;
        case 6:
          day = "星期六";
          break;
      }
      return {
        date: newDate,
        day: day,
        is_active: 0,
        month: newMonth,
        year: year,
        full: full
      }; // 返回对象
    },
    //时间格式转为年月日
    getYMD(time) {
      let date = new Date(time);
      return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
    },
    //预约
    addAppoint(machineId) {
      if (machineId > 0) {
        this.isAppoint = true;
        this.machineId = machineId;
        this.chooseTimeArr = [];
        this.getAppoint();
        let formData = {
          dateTime: this.dateNow,
          machineId: this.machineId
        };
        this.getAppointed(formData);
      } else {
        this.$message.error("请先选择机器再选择时间！");
      }
    },
    //获取时间数组
    async getAppointed(formData) {
      //假设当前时间是10:30，则10:30之前的时间点都是过期的，即状态是2,当前选择的为3
      const res = await baseService.get("/yckj/order/times", {
        dateTime: formData.dateTime,
        machineId: formData.machineId
      });
      this.timeArr = res.data;
      for (let i = 0; i < this.timeArr.length; i++) {
        const item = this.timeArr[i];
        const chooseTime = this.dateNow + " " + item.time;
        if (this.chooseTimeArr.indexOf(chooseTime) > -1) {
          if (item.status === 0) {
            this.timeArr[i].status = 3;
          }
        }
      }
    }
  }
};
</script>
<style scoped>
.top_active {
  border: 1px solid #aaa;
  padding: 3px 20px;
  text-align: center;
}
.top_style {
  border: 1px solid #aaa;
  padding: 3px 20px;
  text-align: center;
  cursor: pointer;
}

.head_week {
  display: flex;
  justify-content: space-between;
  margin: 20px 70px 10px 20px;
  overflow: hidden;
  width: 660px;
  overflow-x: scroll;
}
.head_week_title{
  height: 25px;
  line-height: 20px;
  width: 50px;
}

.head_selected {
  display: flex;
  font-size: 18px;
  justify-content: space-between;
  margin: 20px 70px 10px 20px;
}

.top_active {
  border-color: #02a7f0;
  color: #02a7f0;
}

.button_style {
  text-align: center;
  float: left;
  width: 98px;
}

.button_wrap .el-button {
  text-align: center;
  float: left;
  margin: 0 10px 10px 0;
}

.text {
  line-height: 20px;
}
</style>
